import EchartsWrap from '@/components/widgets/EchartsWrap';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import moment from 'moment';

const option = {
  backgroundColor: 'transparent',
  color: ['#574EFF', '#2FB0FF'],
  grid: {
    left: '20',
    right: '20',
    bottom: '24',
    top: '55',
    containLabel: true,
  },
  legend: {
    data: ['建设中', '前期准备'],
    orient: 'horizontal',
    icon: 'stack',
    itemWidth: 8,
    itemHeight: 2,
    show: true,
    left: 20,
    top: 10,
    textStyle: {
      color: '#ACB7BC',
      fontSize: 12,
    },
  },
  xAxis: {
    type: 'category',
    data: ['', '', '', '', '', '', ''],
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#ACB7BC',
      textStyle: {
        fontSize: 12,
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#2D4754',
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  series: [
    {
      name: '建设中',
      type: 'line',
      symbol: 'none',
      smooth: true,
      // data: [13, 28, 18, 11, 12, 30, 36],
    },
    {
      name: '前期准备',
      type: 'line',
      symbol: 'none',
      smooth: true,
      // data: [13, 8, 20, 32, 35, 28],
    },
  ],
};

const WorkingStatus = ({ projList }) => {
  const [curData, setCurData] = useState(option);
  useEffect(() => {
    if (!projList.length) return;
    const newOption = JSON.parse(JSON.stringify(option));
    const { workingArr, preArr } = getAllProjTimeLineData(projList);
    newOption.series[0].data = workingArr;
    newOption.series[1].data = preArr;
    setCurData(newOption);
  }, [projList]);
  return (
    <div className="chart-box" style={{ width: 400 }}>
      <div className="chart-box-title">工作状态</div>
      <div className="chart-box-body">
        <EchartsWrap option={curData} width={400} opts={{ height: 240 }}></EchartsWrap>
      </div>
    </div>
  );
};

function getAllProjTimeLineData(list) {
  // data
  // 默认准备2个月
  let firstDate;
  let lastDate;
  function getFn(startDateStr, endDateStr) {
    //  一个月准备时间
    // todo 可按项目规模调整
    let preDate = moment(startDateStr).subtract(2, 'months');
    let startDate = moment(startDateStr);
    let endDate = moment(endDateStr);
    firstDate = preDate.isBefore(firstDate) ? preDate : firstDate;
    lastDate = endDate.isAfter(lastDate) ? endDate : lastDate;
    return curDate => {
      let result = [0, 0];
      if (moment(curDate).isBetween(preDate, startDate)) {
        // 当前时间点，当前项目在准备中
        result[0] = 1;
      } else if (moment(curDate).isBetween(startDate, endDate)) {
        // 当前时间点，当前项目在施工中
        result[1] = 1;
      }
      return result;
    };
  }

  const fnList = list.reduce((result, { startDate, completeDate }) => {
    result.push(getFn(startDate, completeDate));
    return result;
  }, []);

  let middleMonth = firstDate.clone().add(1, 'months');
  let xAxis = [];
  // let xAxis = [firstDate];
  while (middleMonth.isBefore(lastDate)) {
    xAxis.push(middleMonth);
    middleMonth = middleMonth.clone().add(1, 'months');
  }
  // xAxis.push(lastDate);
  console.log(xAxis);
  console.log(fnList, Array.isArray(fnList));

  let finalData = xAxis.reduce(
    (result, curDate) => {
      const [pre, working] = fnList.reduce(
        (r, fn) => {
          const data = fn(curDate);
          r[0] += data[0];
          r[1] += data[1];
          return r;
        },
        [0, 0],
      );
      result.preArr.push(pre);
      result.workingArr.push(working);
      return result;
    },
    {
      workingArr: [],
      preArr: [],
    },
  );

  console.log(finalData);
  return finalData;
}

const statusArr = ['筹备', '立项', '在建', '完工', '停工'];

// export default WorkingStatus;

export default connect(({ kanban }) => {
  return { projList: kanban.projList };
})(WorkingStatus);
